<template>
  <div class="filter_input">
    <div v-if="inputdata.type != 'select'">{{data.label}}</div>
    <div v-if="inputdata.type == 'input' && inputdata.value != 'range'" style="flex: 1;padding-left: 4px;">
      <el-input-number v-model="inputvalue.one.value" class="filter_input_number" :min="0" controls-position="right"
        style="width: 100%; height: 28px; ">
        <template #prefix>
          <span>得:</span>
        </template>
      </el-input-number>
    </div>
    <div v-if="inputdata.type == 'input' && inputdata.value == 'range'" style="flex: 1;padding-left: 4px;">
      <app-range-input :data="inputvalue" style="width: 100%; height: 28px; " />
    </div>
    <div v-if="inputdata.type == 'select'" style="flex: 1;">
      <el-select v-model="inputvalue.one.value" style="width: 100%; height: 28px;" @change="changeisno">
        <el-option v-for="item in inputdata.values" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: Object,
  inputdata: Object,
})

const inputvalue = computed(() => {
  let a = {
    one: props.data.values[0],
    two: props.data.values.length == 2 ? props.data.values[1] : {},
  }
  return a
})

const changeisno = (value) => {
  console.log(value);
  props.inputdata.values.forEach(item=> {
    if (item.value == value) {
      props.data.values[0].label = item.label
    }
  });
  
}
</script>

<style lang="scss" scoped>
.filter_input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #333;
}

::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
  width: 21px !important;
  background: none;
}
</style>

<style>
.filter_input_number .el-input__wrapper {
  padding-left: 8px !important;
  padding-right: 30px !important;
}

.filter_input_number .el-input__prefix-inner {
  font-size: 12px;
  color: #333;
}

.filter_input_number .el-input__inner {
  text-align: left;
}
</style>